<template>
  <div>
    <input v-model="message" type="text">
    <input v-model="message2" type="text">
    <input v-model="message3.nav.bar.name" type="text">
    <input v-model="message4.nav.bar.name" type="text">
    <input v-model="message5.name" type="text">
  </div>
</template>

<script setup lang="ts">
import { ref ,watch,reactive} from 'vue'
let message = ref('')
let message2 = ref('')
let message3 = reactive({
  nav:{
    bar:{
      name:'545614'
    }
  }
})
let message4 = ref({
  nav: {
    bar: {
      name: '545614'
    }
  }
})
let message5 = reactive({
 name:'',
 name1:''
})
// watch(message,(oldVal,newVal)=>{
//   console.log(oldVal, newVal);
// })用法
// watch([message, message2],(oldVal,newVal)=>{ //监听多个值
//   console.log(oldVal, newVal);
// })
// watch([message, message2],(oldVal,newVal)=>{ //监听多个值
//   console.log(oldVal, newVal);
// })
// watch(message4,(oldVal,newVal)=>{ //监听深层次数据 ref需要加第三个值{deep:true} reactive加不加都行
//   console.log(oldVal, newVal);
// },{
//   deep: true
// })

watch(()=>message5.name,(oldVal,newVal)=>{ //只想监听对象中的某一个值 将参数写监听函数形势即可
  console.log(oldVal, newVal);
})
</script>
<style scoped lang='less'>
</style>